<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>热力图</title>
    <link rel="stylesheet" href="//minedata.cn/minemapapi/v1.3/minemap.css">
    <link rel="stylesheet" href="//minedata.cn/minemapapi/v1.3/minemap.css">
    <script src="//minedata.cn/minemapapi/v1.3/minemap.js"></script>
    <script src="//minedata.cn/minemapapi/v1.3/plugins/template/template.js"></script>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
<div id="map">
</div>

<script>
    minemap.domainUrl = '//minedata.cn';
    minemap.spriteUrl = '//minedata.cn/minemapapi/v1.3/sprite/sprite';
    minemap.serviceUrl = '//minedata.cn/service';
    minemap.accessToken = 'a3622f2702c34957a160242d2eb0e508';
    minemap.solution = 3756;
    var map = new minemap.Map({
        container: 'map',
        style: '//minedata.cn/service/solu/style/id/3756',
        center: [108.9493117956921, 34.27321513284497],
        zoom: 11,
        pitch: 0
    });
    map.on('load', function () {
        map.addSource("warn", {
            "type": "vector",
            'tiles': ['http://203.81.245.38:48082/weather/weatheralarm/{z}/{x}/{y}']
        });

        /**
         * 标志图层
         */
        map.addLayer({
            "id": "warn",
            "type": "symbol",
            'source': 'warning',
            "source-layer": "WeatherAlarm",
            "layout": {
                "icon-image": "marker-15-6",
                "icon-allow-overlap": true,  //图标允许压盖
            },
            "paint": {
                'icon-color': {
                    "property": "alarm_lev",
                    "stops": [
                        [0, '#0000FF'],
                        [1, '#FFFF00'],
                        [2, '#FFA500'],
                        [3, '#FF0000']
                    ]
                },

            },
            "minzoom": 3,
            "maxzoom": 17,
        });

        map.on('click', function (e) {
            var features = map.queryRenderedFeatures(e.point);
            var lng = e.lngLat.lng;
            var lat = e.lngLat.lat;
            console.log(lng,lat)
            console.log(features, e.lngLat);
        });
    });
</script>
</body>

</html>